var nthStar = 0;
let flag = false;
var isclick = -1;
$(".starA").on({
    // 移入事件
    "mouseover": function () {
        nthStar = $(this).index();
        // 移入的时候先让全部的星星变成灰色
        $(".starA").css("color", "#ccc");
        // 让小于当前移入的星星和当前移入的星星变成黄色
        $(`.starA:lt(${nthStar + 1})`).css("color", "#ffff00");
        // $(this).css("color", "#ffff00")
    },
    // 移出事件
    "mouseout": function () {
        console.log(isclick);
        if (isclick == -1) {
            // 在没有点击前移出让所有星星变回原来刚开始设置的样式
            $(".starA").css("color", "#ffff00");
        } else if (isclick == -2) {
            $(".starA").css("color", "#ccc");
        } else {
            // 点击之后移出星星   使星星亮的个数为点击时的个数
            $(".starA").css("color", "#ccc");
            $(`.starA:lt(${isclick + 1})`).css("color", "#ffff00");
        }
    },
    // 点击事件
    "click": function () {
        // 点击时和移入效果相同    先让全部的星星变成会灰色，在让小于当前点击的星星和当前点击的星星变成黄色
        flag = !flag
        if (!flag) {
            if (isclick == $(this).index()) {
                $(".starA").css("color", "#ccc");
                isclick = -2;
                $(this).off("mouseout");
            } else {
                isclick = $(this).index();
                $(".starA").css("color", "#ccc");
                $(`.starA:lt(${isclick + 1})`).css("color", "#ffff00");
            }
        } else {
            isclick = $(this).index();
            $(".starA").css("color", "#ccc");
            $(`.starA:lt(${isclick + 1})`).css("color", "#ffff00");

        }
    }
})